<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#root button{
			padding:5px;
			margin:5px;
		}
		#root button.active{
			background:red;
		}
		#root div{
			width: 500px;
			height: 300px;
			border:1px solid green;
		}
	</style>
</head>
<body>
<div id="root">
	<button>体育</button>
	<button>娱乐</button>
	<button>财经</button>
	<div>体育新闻</div>
	<div>娱乐新闻</div>
	<div>财经新闻</div>
</div>
</body>
<script>
	// * 将面向过程的变量作为面向对象的属性。
	// * 将面向过程的函数作为面向对象的方法
	function Tag(){
		this.btns = document.querySelectorAll("button");
		this.divs = document.querySelectorAll("#root div");
		this.index = 0;// 记录当前被选中的下标
		this.init();
	}
	Tag.prototype.init = function(){
		
		this.btns.forEach(function(btn,i){
			this.hide(i);
			btn.onclick = function(){
				if(this.index === i) return;
				this.hide();
				this.index = i;
				this.show();
			}.bind(this);
		}.bind(this))
		this.show();
	}
	Tag.prototype.hide = function(i=this.index){
		this.btns[i].className = null;
		this.divs[i].style.display = "none";
	}
	Tag.prototype.show = function(){
		this.btns[this.index].className = "active";
		this.divs[this.index].style.display = "block";
	}
	new Tag();
</script>
</html>